<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        .form {
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form">
                <h2 class="col-md-offset-4">博客园登录</h2>
                <form>
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名</label>
                        <input type="text" class="form-control" id="user">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="pwd">
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="Verification-Code">验证码</label>
                            <input type="text" class="form-control" id="valid_code">
                        </div>
                        <div class="col-md-6">
                            <label for="Verification-img"></label>
                            <img width="270" height="36" id="valid_code_img" src="/get_valid_code_img/" alt="">
                        </div>
                    </div>
                    <button type="button" class="btn btn-default login_btn">登录</button>
                    <span class="error"></span>
                    <a href="/register" class="btn btn-success pull-right">注册</a>
                </form>
            </div>
        </div>
    </div>
</div>


</body>
<script src="/static/js/jquery.js"></script>
<script>
    $("#valid_code_img").click(function () {
        $(this)[0].src += "?"
    })
    $(".login_btn").click(function (event) {
        event.preventDefault();
        $.ajax({
            url: "",
            type: "post",
            {#'async' : false,#}
            data: {
                user: $("#user").val(),
                pwd: $("#pwd").val(),
                valid_code: $("#valid_code").val(),
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
            },
            success: function (data) {

                if (data.user) {
                    if (location.search) {
                        location.href = location.search.slice(6)
                    } else {

                        location.href = "/" + data.user
                    }

                } else {
                    $(".error").text(data.msg).css({"color": "red", "margin-left": "10px"});
                    setTimeout(function () {
                        $(".error").text("");
                    }, 1000)

                }
            }
        })
    })
</script>
</html>